<template>
	<div class="container">
		<div class="userInfo">
			<img src="../assets/personIcon/liaotian_02.png"  alt="" v-if="islogin"> 
			<img src="../assets/smallIcon/logo.png" alt="" v-else>
			<p class="userName" v-if="islogin">{{username}}</p>
			<p class="userName" v-else>游客：Asd15895</p>
			<p class="lg" v-if="islogin">
				简介：一起在路上
			</p>
			<p class="lg" v-else>
				<span>
					<router-link to="/layout/login">登录</router-link>
				</span> /
				<span>
					<router-link to="/layout/register">注册</router-link>
				</span>
			</p>
			<p class="jianjie" v-if="islogin">
				<span>关注  12</span>
				<span>粉丝  3</span>
			</p>
			<p class="jianjie" v-else>简介：欢迎使用“路上”APP</p>
		</div>
		<router-link to="/layout/person_page">
			<div class="homePage">
				<ul>
					<li>
						<div class="home_left">
							<img src="../assets/smallIcon/home.png"  alt="" >
							个人主页
						</div>
						<img src="../assets/smallIcon/get into.png" alt="" class="link">
					</li>
				</ul>			
			</div>
		</router-link>
		<router-link to="/layout/person_info">
			<div class="homePage" id="two">
				<ul>
					<li>
						<div class="home_left">
							<img src="../assets/smallIcon/Essential information.png"  alt="">
							基本信息
						</div>
						<img src="../assets/smallIcon/get into.png" alt="" class="link">
					</li>
				</ul>
			</div>
		</router-link>
		<div class="homePage" id="three" >
			<ul>
				<li>
					<div class="home_left">
						<img src="../assets/smallIcon/follow.png"  alt="">
						我的关注
					</div>
					<img src="../assets/smallIcon/get into.png" alt="" class="link">
				</li>
			</ul>
		</div>
		<div class="homePage" id="four">
			<ul>
				<li>
					<div class="home_left">
						<img src="../assets/smallIcon/Collection.png"  alt="">
						我的收藏
					</div>
					<img src="../assets/smallIcon/get into.png" alt="" class="link">
				</li>
			</ul>
		</div>
		
		<router-link to="/layout/praise_main">
			<div class="homePage" id="five">
				<ul>
					<li>
						<div class="home_left">
							<img src="../assets/smallIcon/Fabulous.png"  alt="">
							我赞过的
						</div>
						<img src="../assets/smallIcon/get into.png" alt="" class="link">
					</li>
				</ul>
			</div>
		</router-link>
		
		<router-link to="/layout/setting">
			<div class="homePage" id="three">
				<ul>
					<li>
						<div class="home_left">
							<img src="../assets/smallIcon/set.png"  alt="">
							设置
						</div>
						<img src="../assets/smallIcon/get into.png" alt="" class="link">
					</li>
				</ul>
			</div>
		</router-link>

		<FooterNav />
	</div>
</template>

<script>

import FooterNav from "../components/footerNav"

export default{
	name:"wode",
	data(){
		return{
			islogin:false,
			username:""
		}
	},
	components:{
		FooterNav
	},
	mounted:function(){
		this.username = this.$cookie.get('username')
		if(this.username){
			this.islogin = true;
		}
	}
}	

</script>
<style scoped lang="less">
	.container{
		width: 100%;
		height: 1334 /50rem;
	}
	.userInfo{
		width: 100%;
		height: 500 /50rem;
		background-color: #fff;
		text-align: center;
		img{
			width: 144 /50rem;
			height: 144/ 50rem;
			margin-top: 85 /50rem;
			margin-bottom: 36 /50rem;
		}
		.userName{
			font-size: 24 /50rem;
		}
		.lg{
			margin-top: 20 /50rem;
			font-size: 20 /50rem;
		}
		.jianjie{
			margin-top: 48 /50rem;
			font-size: 24 /50rem;
			span:nth-child(2){
				margin-left: 119 /50rem;
			}
		}
	}
	#two,#four,#five{
		margin-top: 2 /50rem;
	}
	.homePage{
		width: 100%;
		background-color: #fff;
		margin-top: 20 /50rem;
		
		ul{
			width: 710 /50rem;
			margin: 0 auto;
			li{
				height: 80 /50rem;
				line-height: 80 /50rem;
				.home_left{
					float: left;
				}
				img:nth-child(1){
					width: 40 /50rem;
					height: 40 /50rem;
					vertical-align: middle;
					margin-right: 20 /50rem;
				}
				.link{
					width: 22 /50rem;
					height: 40 /50rem;
					float: right;
					margin-top: 20 /50rem;
				}
			}
		}
	}

</style>